<?php
/**
 * Created by JetBrains PhpStorm.
 * User: ICT
 * Date: 2/5/14
 * Time: 8:20 AM
 * To change this template use File | Settings | File Templates.
 */
?>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
<body>
    <div id="stick">Call me</div>
    <div class="showbox slideright left">Box 1</div>
    <div class="left">
        <code>
.slideright:hover {<br/>
-webkit-transform: translate(3em,0);<br/>
-moz-transform: translate(3em,0);<br/>
-o-transform: translate(3em,0);<br/>
-ms-transform: translate(3em,0);<br/>
transform: translate(3em,0);<br/>}
        </code>
    </div>
    <img src="images/truc%20toa%20do.bmp" class="left">

    <div class="cboth margin2"></div>

    <div class="showbox quay left">Box 2</div>
    <div class="left">
        <code>
.quay:hover{<br/>
-webkit-transform: rotate(30deg);<br/>
-moz-transform: rotate(30deg);<br/>
-o-transform: rotate(30deg);<br/>
-ms-transform: rotate(30deg);<br/>
transform: rotate(30deg);<br/>}
        </code>
    </div>

    <div class="margin2 cboth"></div>

    <div class="showbox left scale">Box 3</div>
    <div class="left">
        <code>
.scale:hover{<br>
-webkit-transform: scale(0.5,0.5);<br>
-moz-transform: scale(0.5,0.5);<br>
-o-transform: scale(0.5,0.5);<br>
-ms-transform: scale(0.5,0.5);<br>
transform: scale(0.5,0.5);<br>
}
        </code>
    </div>

    <div class="margin2 cboth"></div>

    <div class="showbox left multi">Box 4</div>
    <div class="left">
        <code>
.multi:hover{<br>
-webkit-transform: scale(2,2) rotate(90deg);<br>
-moz-transform: scale(2,2) rotate(90deg);<br>
-o-transform: scale(2,2) rotate(90deg);<br>
-ms-transform: scale(2,2) rotate(90deg);<br>
transform: scale(2,2) rotate(90deg);<br>
border-color: red;<br>
}
        </code>
    </div>

    <div class="margin2 cboth"></div>

    <div class="timing left">
        <div id="box"></div>
    </div>

    <div class="left">
        <code>
        #box{ <br>
        position: absolute;<br>
        left: 0;<br>
        top: 0;<br>
        width: 100px;<br>
        height: 100px;<br>
        background-color: blue;<br>
        -webkit-transition-property: left, top, background, -webkit-transform;<br>
        -webkit-transition-duration: 2s, 2s, 1s, 1s;<br>
        -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;<br>
        -webkit-transition-delay: 0s, 0s, 0s, 1s;<br>
        }<br><br>

        .timing{<br>
        position: relative;<br>
        margin : 0 3em;<br>
        width: 200px;<br>
        height: 200px;<br>
        background-color: antiquewhite;<br>
        }<br><br>
        .timing:hover #box{<br>
        left: 100px;<br>
        top: 100px;<br>
        background: red;<br>
        -webkit-transform: rotate(360deg);<br>
        }
        </code>
    </div>

    <div class="margin2 cboth"></div>

    <div class="relative">
        <div id="test" class="marginright2"></div>
        <div class="sprite"></div>
    </div>
    <div style="width: 132px;height: 220px"></div>
    <div class="margin2 cboth"></div>

    <div class="sprite2"></div>

    <div class="margin2 cboth"></div>

    <div class="rotate2"></div>

    <div class="margin2 cboth"></div>

	<div class="left">
		
		<span id="countdown"></span>
		<script>
		// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  
 
}, 1000);
		</script>
	</div>

    <div class="margin2 cboth">
        <div class="left">

            <div class="button">
                <a href="#">Download</a>
                <p class="top">click to begin</p>
                <p class="bottom">1.2MB .zip</p>
            </div>

        </div>
    </div>

    <div class="margin2 cboth">
        <div class="left">
            <a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>
         </div>
    </div>

    <div class="margin2 cboth">
        <div id="multiBackGround"></div>
    </div>

    <div class="margin2 cboth">
        <meter min="100" max="1000" value="539"></meter> 539
        </div>
</body>
</html>